<template>
  <div class="chat-message-test p-6 bg-gray-100 min-h-screen">
    <h1 class="text-2xl font-bold mb-6 text-center">ChatMessage 文件显示功能测试</h1>
    
    <div class="max-w-4xl mx-auto space-y-6">
      <!-- 用户消息示例 -->
      <div class="bg-white rounded-lg shadow p-4">
        <h3 class="text-lg font-semibold mb-4">用户消息（带附件）</h3>
        <ChatMessage :message="userMessage" />
      </div>
      
      <!-- AI消息示例（不带文件） -->
      <div class="bg-white rounded-lg shadow p-4">
        <h3 class="text-lg font-semibold mb-4">AI消息（无文件）</h3>
        <ChatMessage :message="aiMessageNoFiles" />
      </div>
      
      <!-- AI消息示例（带文件） -->
      <div class="bg-white rounded-lg shadow p-4">
        <h3 class="text-lg font-semibold mb-4">AI消息（包含多种类型文件）</h3>
        <ChatMessage :message="aiMessageWithFiles" />
      </div>
      
      <!-- 测试按钮 -->
      <div class="bg-white rounded-lg shadow p-4">
        <h3 class="text-lg font-semibold mb-4">测试控制</h3>
        <div class="flex gap-4">
          <button 
            @click="addMoreFiles" 
            class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          >
            添加更多文件到AI消息
          </button>
          <button 
            @click="toggleStreaming" 
            class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
          >
            {{ aiMessageWithFiles.streaming ? '停止流式' : '开始流式' }}
          </button>
          <button 
            @click="simulateMessageEnd" 
            class="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600"
          >
            模拟 onMessageEnd 事件
          </button>
          <button 
            @click="resetTest" 
            class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
          >
            重置测试
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import ChatMessage from './ChatMessage.vue'
import type { ChatItem } from '@/types/app'

// 用户消息示例
const userMessage = ref<ChatItem>({
  id: 'user_1',
  content: '请帮我分析这些文档中关于分布式光伏发电补贴政策的内容。',
  isAnswer: false,
  message_files: [
    {
      id: '48.国能发新能（2019）49号-国家能源局印发《关于2019年风电、光伏发电项目建设有关事项的通知》.docx',
      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      url: '#',
      belongs_to: 'user'
    },
    {
      id: '36.发改价格（2013）1638号-国家发展改革委关于发挥价格杠杆作用促进光伏产业健康发展的通知.docx',
      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      url: '#',
      belongs_to: 'user'
    }
  ]
})

// AI消息示例（无文件）
const aiMessageNoFiles = ref<ChatItem>({
  id: 'ai_1',
  content: '我将为您分析这些关于分布式光伏发电补贴政策的文档。让我先查看这些文件的内容...',
  isAnswer: true
})

// AI消息示例（带文件）
const aiMessageWithFiles = reactive<ChatItem & { files?: any[] }>({
  id: 'ai_2',
  content: `根据您提供的政策文件，我为您整理了分布式光伏发电补贴政策的相关内容：

## 主要政策要点

1. **国能发新能（2019）49号文件**规定了2019年风电、光伏发电项目建设的具体要求
2. **发改价格（2013）1638号文件**明确了价格杠杆作用在促进光伏产业发展中的重要性

## 补贴标准

对于分布式光伏发电项目，存在"固定度电补贴标准"，但政策文件未明确列示具体数值。对于其他类型项目，补贴强度需通过竞争配置方案及修正规则计算，但同样未提供具体数值参数。

我已生成了相关的分析报告和图表文件供您参考。`,
  isAnswer: true,
  files: [
    {
      id: 'analysis_report_20241225.pdf',
      name: '光伏发电补贴政策分析报告.pdf',
      type: 'application/pdf',
      url: 'https://example.com/analysis_report.pdf',
      size: 2048576, // 2MB
      belongs_to: 'assistant'
    },
    {
      id: 'policy_chart.png',
      name: '补贴政策对比图表.png',
      type: 'image/png',
      url: 'https://via.placeholder.com/400x300/4F46E5/FFFFFF?text=补贴政策图表',
      size: 524288, // 512KB
      belongs_to: 'assistant'
    },
    {
      id: 'data_summary.xlsx',
      name: '政策数据汇总表.xlsx',
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      url: 'https://example.com/data_summary.xlsx',
      size: 1048576, // 1MB
      belongs_to: 'assistant'
    }
  ],
  streaming: false
})

// 测试方法
const addMoreFiles = () => {
  const newFile = {
    id: `test_file_${Date.now()}`,
    name: `测试文件_${Date.now()}.txt`,
    type: 'text/plain',
    url: 'https://example.com/test.txt',
    size: Math.floor(Math.random() * 1000000) + 1000,
    belongs_to: 'assistant' as const
  }
  
  if (!aiMessageWithFiles.files) {
    aiMessageWithFiles.files = []
  }
  aiMessageWithFiles.files.push(newFile)
}

const toggleStreaming = () => {
  aiMessageWithFiles.streaming = !aiMessageWithFiles.streaming
  if (aiMessageWithFiles.streaming) {
    // 模拟流式内容更新
    let index = 0
    const originalContent = aiMessageWithFiles.content
    aiMessageWithFiles.content = ''
    
    const interval = setInterval(() => {
      if (index < originalContent.length) {
        aiMessageWithFiles.content += originalContent[index]
        index++
      } else {
        aiMessageWithFiles.streaming = false
        clearInterval(interval)
      }
    }, 50)
  }
}

const simulateMessageEnd = () => {
  // 模拟 onMessageEnd 事件中接收到的文件数组
  const mockMessageEndFiles = [
    {
      id: 'end_file_1',
      name: '最终报告.pdf',
      type: 'application/pdf',
      url: 'https://example.com/final_report.pdf',
      size: 3145728, // 3MB
      belongs_to: 'assistant'
    },
    {
      id: 'end_file_2',
      name: '结果图表.png',
      type: 'image/png',
      url: 'https://via.placeholder.com/600x400/FF6B6B/FFFFFF?text=结果图表',
      size: 819200, // 800KB
      belongs_to: 'assistant'
    },
    {
      id: 'end_file_3',
      name: '数据导出.xlsx',
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      url: 'https://example.com/data_export.xlsx',
      size: 2097152, // 2MB
      belongs_to: 'assistant'
    }
  ]
  
  // 将文件添加到现有的 AI 消息中
  if (!aiMessageWithFiles.files) {
    aiMessageWithFiles.files = []
  }
  
  // 添加新文件到现有文件列表
  aiMessageWithFiles.files.push(...mockMessageEndFiles)
  
  // 更新消息内容，提示用户文件已添加
  aiMessageWithFiles.content += '\n\n**📎 消息结束时收到的附加文件：**\n- 最终报告.pdf\n- 结果图表.png\n- 数据导出.xlsx'
  
  console.log('🎯 模拟 onMessageEnd 事件完成，已添加文件:', mockMessageEndFiles)
}

const resetTest = () => {
  // 重置到初始状态
  aiMessageWithFiles.files = [
    {
      id: 'analysis_report_20241225.pdf',
      name: '光伏发电补贴政策分析报告.pdf',
      type: 'application/pdf',
      url: 'https://example.com/analysis_report.pdf',
      size: 2048576,
      belongs_to: 'assistant'
    },
    {
      id: 'policy_chart.png',
      name: '补贴政策对比图表.png',
      type: 'image/png',
      url: 'https://via.placeholder.com/400x300/4F46E5/FFFFFF?text=补贴政策图表',
      size: 524288,
      belongs_to: 'assistant'
    },
    {
      id: 'data_summary.xlsx',
      name: '政策数据汇总表.xlsx',
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      url: 'https://example.com/data_summary.xlsx',
      size: 1048576,
      belongs_to: 'assistant'
    }
  ]
  aiMessageWithFiles.streaming = false
  aiMessageWithFiles.content = `根据您提供的政策文件，我为您整理了分布式光伏发电补贴政策的相关内容：

## 主要政策要点

1. **国能发新能（2019）49号文件**规定了2019年风电、光伏发电项目建设的具体要求
2. **发改价格（2013）1638号文件**明确了价格杠杆作用在促进光伏产业发展中的重要性

## 补贴标准

对于分布式光伏发电项目，存在"固定度电补贴标准"，但政策文件未明确列示具体数值。对于其他类型项目，补贴强度需通过竞争配置方案及修正规则计算，但同样未提供具体数值参数。

我已生成了相关的分析报告和图表文件供您参考。`
}
</script>

<style scoped>
.chat-message-test {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
</style> 